<template>
    <div class="home_container">
        <div class="home1">
            <ul class="home1_ul">
                <li><span>手机</span></li>
                <li><span>电视</span></li>
                <li><span>笔记本 平板</span></li>
                <li><span>家电</span></li>
                <li><span>出行 穿戴</span></li>
                <li><span>智能 路由器</span></li>
                <li><span>电源 配件</span></li>
                <li><span>健康 儿童</span></li>
                <li><span>耳机 音箱</span></li>
                <li><span>生活 箱包</span></li>
            </ul>
            <div class="c1">
                <div class="Carousel">
                    <img src="imgs/3.png">
                    <img src="imgs/2.png">
                    <img src="imgs/3.png">
                </div>
            </div>
        </div>

        <div class="home2"></div>
    </div>

</template>



<style>
.home_container {
    margin: 0 120px 0 120px;
}

.home1 {
    width: 100%;
    display: flex;
}

.Carousel {
    width: 9999px;
    height: 9999px;
    animation: switch 9s infinite;
}

@keyframes switch {
    0% {}

    ;

    40% {
        transform: translateX(-1000px);
    }

    80% {
        transform: translateX(-2000px);
    }

    100% {
        transform: translateX(-3000px);
    }
}

.Carousel>img {
    float: left;
}

.c1 {
    width: 75%;
    height: 400px;
    overflow: hidden;
}


.home1_ul {
    width:25%;
    background-color: rgba(105,101,101,.6);
    color: #fff;
    padding: 8px 0 8px 0;
}

li{
    list-style: none;
    padding: 8px 12px 8px 12px;
    transition:.1s;
}

li:hover{
    background-color: #ff6700;
}
</style>